<template>
    <div 
        class="texts-box" 
        :class="className"
        :style="{ backgroundColor: data.backgroundColor,  backgroundImage: 'url('+ imgUrl +')'}"
    >
    <!-- {{ data }} -->

        
        <template v-if="data.remarks || data.title">
        <!-- <template v-if="data.data.remarks && data.data.length > 0"> -->
            <!-- <a 
                v-for="(item, index) in data.data"
                :key="index"
                :href="item.link"
            >
                <img :src="item.url">
            </a> -->
            <div >
                <h3 :style="{ fontSize: data.titleFontSize + 'px', color: data.titleFontColor}">{{data.title}}</h3>
                <p class="content" :style="{ fontSize: data.remarksFontSize + 'px', color: data.remarksFontColor}">{{ data.remarks}}</p>
            </div>
        </template>
        <template v-else>
            <!-- <div class="image-null"><span class="el-icon-picture"></span></div> -->
            <div>
                <h3>文本标题</h3>
                <p>文本内容</p>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'Texts',
    props: ['data', 'className'],
    data() {
        return {
            nowUrl: null
        }
    },
    created() {
        
    },
    computed: {
        imgUrl() {
            if (this.data.data[0]) {
                return this.data.data[0].url;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .texts-box{
        padding: 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .content {
            white-space: pre-wrap;
        }
    }
</style>